<template>
  <div class="test">
    <!-- <img alt="Vue logo" src="~@/assets/logo.png" /> -->
    <svg-icon icon-class="lock" class="svgtest" />
    <svg-icon icon-class="edit"></svg-icon>
    <div class="blue-btn">首页</div>
    <div>{{ userId }}</div>
    <el-button type="primary">主要按钮</el-button>
    <el-input v-model="input" placeholder="请输入内容"></el-input>

    <!-- 国际化 -->
    <span v-text="$t('route.dashboard')"></span>
    <span>{{ $t("route.dashboard") }}</span>
    <!-- echarts组件 -->
    <Charts :width="'500px'" :height="'300px'" :options="options" />

    <ThemePicker @change="themeChange" />
    <span>主题切换</span>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
// 图标组件
import { Charts, ThemePicker } from "@/components";

export default {
  name: "test",
  components: {
    Charts,
    ThemePicker
  },
  data() {
    return {
      input: "",
      options: {} //图像配置
    };
  },
  methods: {
    themeChange(val) {
      this.$store.dispatch("settings/changeSetting", {
        key: "theme",
        value: val
      });
    }
  },
  computed: {
    ...mapGetters(["userId"])
  },
  async created() {
    //请求mock echarts图表数据
    let resultEcharts = await this.$http({
      url: "mockecharts",
      method: "get"
    });
    console.log(resultEcharts.data.data);
    let { xAxisData, data1, data2 } = resultEcharts.data.data;

    this.options = {
      title: {
        text: "柱状图动画延迟"
      },
      legend: {
        data: ["bar", "bar2"],
        align: "left"
      },
      toolbox: {
        // y: 'bottom',
        feature: {
          magicType: {
            type: ["stack", "tiled"]
          },
          dataView: {},
          saveAsImage: {
            pixelRatio: 2
          }
        }
      },
      tooltip: {},
      xAxis: {
        data: xAxisData,
        silent: false,
        splitLine: {
          show: false
        }
      },
      yAxis: {},
      series: [
        {
          name: "bar",
          type: "bar",
          data: data1,
          animationDelay: function(idx) {
            return idx * 10;
          }
        },
        {
          name: "bar2",
          type: "bar",
          data: data2,
          animationDelay: function(idx) {
            return idx * 10 + 100;
          }
        }
      ],
      animationEasing: "elasticOut",
      animationDelayUpdate: function(idx) {
        return idx * 5;
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.svgtest {
  color: brown;
  font-size: 28px;
}
</style>
